body {
   height: 100%;
   display: flex;
   background-color: #f5f6f7;
   font-size: 14px;
   flex-direction: column;
}
.toastui-editor-contents {
   font-size: 16px;
}
.main_father {
   flex: 1;
   padding: 8px 12px 0 12px;
   .container {
      width: 1231px;
      margin: 0 auto;
      display: flex;
      // justify-content:space-around;
      aside {
         display: block;
         width: 300px;
         float: left;

         #asideProfile {
            padding-bottom: 10px;
            .profile-intro {
               padding: 16px 16px 6px 16px;

               .avatar-box {
                  position: relative;
                  width: 48px;
                  height: 48px;
                  flex-shrink: 0;
                  .avatar_pic {
                     display: block;
                     width: 48px;
                     height: 48px;
                     border-radius: 50%;
                  }
               }
               .flex-column {
                  flex-direction: column !important;
               }
               .user-info {
                  margin-left: 8px;
                  width: 156px;
                  position: relative;
                  padding-top: 4px;
                  #uid {
                     white-space: inherit;
                     margin-right: 6px;
                     overflow: hidden;
                     .name {
                        width: 100%;
                        font-size: 14px;
                        font-weight: 500;
                        height: 20px;
                        line-height: 20px;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                     }
                  }
                  .flag {
                     position: relative;
                     .bubble {
                        display: none;
                        width: 134px;
                        position: absolute;
                        top: 28px;
                        left: -42px;
                        z-index: 9;
                        padding: 8px 6px;
                        line-height: 12px;
                        text-align: center;
                        background-color: rgba(15, 15, 15, 0.8);
                        font-size: 12px;
                        border-radius: 4px;
                        color: #fff;
                     }
                  }
               }
               .profile-intro-name-box {
                  flex-grow: 1;
               }
               .profile-intro-name-boxTop {
                  display: flex;
               }
               .profile-intro-name-boxFooter {
                  display: flex;
               }
               .personal-home-years {
                  width: 54px;
               }
               .personal-home-page {
                  color: #999aaa;
                  font-size: 13px;
                  line-height: 20px;
                  height: 20px;
                  overflow: hidden;
                  .personal-home-certification {
                     padding-left: 8px;
                     display: -webkit-box;
                     display: -ms-flexbox;
                     display: flex;
                     display: block;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     align-items: center;
                     img {
                        height: 14px;
                        margin-right: 4px;
                        vertical-align: -2px;
                     }
                  }
               }
            }
            .data-info {
               padding: 9px 10px;
               .text-center {
                  text-align: center;
                  flex: 1;
               }
            }
            .data-info.item-tiling a {
               color: #999aaa !important;
            }
            .data-info.item-tiling {
               .count {
                  color: #4a4d52;
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 22px;
               }
               dd {
                  color: #999aaa;
                  font-size: 14px;
                  line-height: 22px;
                  padding: 3px 0;
               }
               .font {
                  color: #222226;
               }
               .level {
                  width: 22px;
                  height: 22px;
                  vertical-align: -6px;
               }
               dl:hover a > .font {
                  color: #fc5531;
               }
            }
            .profile-intro-name-boxOpration {
               padding: 8px 16px 10px 16px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               .opt-letter-watch-box {
                  color: #f5a523;
                  font-size: 12px;
                  width: 126px;
                  height: 28px;
                  border-radius: 14px;
                  line-height: 26px;
                  text-align: center;
                  .bt-button {
                     display: block;
                     border-radius: 4px;
                     box-sizing: border-box;
                     height: 100%;
                     font-size: 14px;
                  }
                  .personal-letter {
                     border: 1px solid #ccccd8;
                     background-color: #fff;
                     color: #555666;
                     line-height: 28px;
                     border-radius: 14px;
                     &:hover {
                        color: #555666;
                        border-color: #555666;
                     }
                  }
                  .personal-watch {
                     color: #555666;
                     line-height: 26px;
                     border-radius: 14px;
                     border: 1px solid #ccccd8;
                     &:hover {
                        border-color: #555666;
                     }
                  }
               }
            }
         }
         #asideSearchArticle {
            .search-comter {
               padding: 0 16px;
            }
            .aside-search {
               height: 32px;
               border-radius: 5px;
               background: #f0f0f5;
               margin: 8px 0;
               position: relative;
               .input-serch-blog {
                  font-size: 14px;
                  color: #555666;
                  display: block;
                  float: left;
                  width: 217px;
                  padding-left: 16px;
                  border: 0;
                  height: 32px;
                  border-radius: 5px;
                  background: 0 0;
               }
               .btn-search-blog {
                  background-color: #e8e8ee;
                  color: #ccc;
                  font-size: 14px;
                  display: block;
                  text-align: center;
                  width: 32px;
                  height: 32px;
                  float: right;
                  line-height: 32px;
                  margin-top: 0;
                  border-radius: 0 5px 5px 0;
                  cursor: pointer;
                  img {
                     width: 32px;
                     height: 32px;
                  }
               }
            }
         }
         #asideHotArticle {
            .hotArticle-list {
               margin-top: -8px;
               li {
                  margin-top: 8px;
                  a {
                     display: block;
                     word-wrap: break-word;
                     color: #555666;
                     img {
                        width: 14px;
                        height: 14px;
                        vertical-align: -3px;
                        margin-right: 3px;
                        margin-left: 4px;
                     }
                     &:hover {
                        color: #fc5531;
                     }
                     .read {
                        font-size: 12px;
                        color: #999aaa;
                        line-height: 24px;
                     }
                  }
               }
            }
         }
         .aside-box {
            margin-bottom: 8px;
            background-color: #fff;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
            a {
               color: #555666;
            }
            .aside-content {
               padding: 12px 16px 16px 16px;
               overflow: hidden;
            }
            .aside-content {
               word-wrap: break-word;
            }
            .aside-title {
               color: #fff;
               background: url(../image/纸飞机背景.png) no-repeat center;
               background-size: 300px 40px;
               padding: 0 16px;
               height: 38px;
               line-height: 38px;
               margin: 0;
               position: relative;
               font-weight: bold;
               font-size: 14px;
            }
         }
      }
      main {
         margin-left: 8px;
         flex: 1;
         display: block;
         .blog-content-box {
            position: relative;
            padding: 0 24px 16px;
            background: #fff;
            .article-header-box {
               border-bottom: 1px solid #f5f6f7;
               padding-top: 8px;
               z-index: 9;
               background-color: #fff;
               .article-header {
                  .article-title-box {
                     margin-bottom: 8px;
                     .title-article {
                        font-size: 28px;
                        word-wrap: break-word;
                        color: #222226;
                        font-weight: 600;
                        margin: 0;
                        word-break: break-all;
                     }
                  }
                  .article-info-box {
                     position: relative;
                     background: #f8f8f8;
                     border-radius: 4px;
                     .article-bar-top {
                        color: #999aaa;
                        width: 88%;
                        display: flex;
                        // align-items: center;
                        box-sizing: border-box;
                        .article-type-img {
                           width: 36px;
                           height: 32px;
                           margin-right: 12px;
                           line-height: 32px;
                        }
                        .follow-nickName {
                           color: #555666;
                           margin-right: 20px;
                           &:hover {
                              color: #fc5531;
                           }
                        }
                        .time {
                           position: relative;
                        }
                        .article-read-img {
                           width: 24px;
                           height: 24px;
                           margin-top: 4px;
                        }
                        .article-collect-img {
                           vertical-align: middle;
                           margin-top: 0;
                           width: 20px;
                           height: 20px;
                        }
                        span {
                           vertical-align: top;
                           margin-right: 12px;
                           line-height: 32px;
                        }
                        a {
                           vertical-align: top;
                           margin-right: 12px;
                           line-height: 32px;
                           &:hover {
                              span {
                                 color: #fc5531;
                              }
                           }
                        }
                     }
                     .blog-tags-box {
                        padding-left: 48px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        .tags-box {
                           font-size: 14px;
                           line-height: 24px;
                           margin-bottom: 4px;
                           margin-right: 8px;
                           .label {
                              display: inline-block;
                              color: #999aaa;
                           }
                           .tag-link {
                              box-sizing: border-box;
                              margin-right: 8px;
                              padding: 3px 6px;
                              font-size: 12px;
                              background-color: #fff;
                              color: #5094d5;
                              border: 1px solid #eaeaef;
                              height: 24px;
                              line-height: 17px;
                              border-radius: 2px;
                              display: inline-block;
                           }
                        }
                     }
                     .slide-content-box {
                        display: none;
                        background-color: #fff;
                        padding: 4px 0;
                     }
                     .operating {
                        position: absolute;
                        top: 0;
                        right: 8px;
                        line-height: 32px;
                        .href-article-edit {
                           position: relative;
                           color: #8fb0c9;
                           padding: 0 4px;
                           font-size: 12px;
                        }
                     }
                  }
               }
            }
            #blogColumnPayAdvert {
               background-color: #fff;
               .column-group {
                  padding: 16px 0;
               }
               .column-group-item {
                  display: flex;
                  position: relative;
                  flex-wrap: nowrap;
                  align-items: center;
                  height: 56px;
                  padding: 9px 16px 9px 16px;
                  background: #fff;
                  border-radius: 2 px;
                  border: 1px solid #f0f0f0;
                  box-sizing: border-box;
                  width: 100%;
                  .item-l {
                     overflow: hidden;
                     width: 100%;
                     display: flex;
                     flex-wrap: nowrap;
                     align-items: center;
                     a {
                        overflow: hidden;
                        display: flex;
                        flex-wrap: nowrap;
                        align-items: center;
                        img {
                           width: 36px;
                           height: 36px;
                           border-radius: 2px;
                           border: 1px solid #f5f6f7;
                           vertical-align: middle;
                        }
                        .title {
                           font-size: 16px;
                           font-weight: 500;
                           color: #222226;
                           line-height: 22px;
                           margin-left: 10px;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           white-space: nowrap;
                           vertical-align: middle;
                        }
                     }
                     .dec {
                        margin-left: 8px;
                        font-size: 14px;
                        color: #999aaa;
                        line-height: 20px;
                        min-width: 100px;
                     }
                  }
                  .item-m {
                     min-width: 360px;
                     font-size: 14px;
                     color: #999aaa;
                     line-height: 40px;
                     span {
                        float: right;
                        margin-right: 32px;
                     }
                  }
                  .item-r {
                     a {
                        display: block;
                        width: 80px;
                        height: 28px;
                        font-size: 12px;
                        color: #555666;
                        background: #fff;
                        border-radius: 16px;
                        border: 1px solid #ccccd8;
                        text-align: center;
                        line-height: 28px;
                     }
                  }
               }
            }
         }
         .more-toolbox-new {
            background-color: #fff;
            box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
            display: flex;
            position: relative;
            margin-bottom: 8px;
            .left-toolbox {
               display: flex;
               flex-wrap: nowrap;
               justify-content: space-between;
               align-items: center;
               padding: 17px 24px;
               height: 64px;
               box-sizing: border-box;
               .toolbox-left {
                  display: flex;
                  flex-wrap: nowrap;
                  justify-content: space-between;
                  align-items: center;
                  .profile-box {
                     .profile-href {
                        display: flex;
                        flex-wrap: nowrap;
                        justify-content: space-between;
                        align-items: center;
                        overflow: hidden;
                        .profile-img {
                           width: 32px;
                           height: 32px;
                           border-radius: 32px;
                           border: 1px solid #f5f6f7;
                           margin-right: 8px;
                        }
                        .profile-name {
                           max-width: 160px;
                           height: 24px;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           white-space: nowrap;
                           font-size: 16px;
                           font-weight: 600;
                           color: #222226;
                           line-height: 24px;
                           margin-right: 8px;
                        }
                     }
                  }
                  .profile-attend {
                     position: relative;
                     a {
                        display: block;
                        min-width: 60px;
                        height: 28px;
                        background: #fff;
                        border-radius: 16px;
                        font-size: 14px;
                        line-height: 28px;
                        text-align: center;
                     }
                     .tool-attend {
                        border: 1px solid #ccccd8;
                        color: #555666;
                     }
                  }
               }
               .toolbox-middle {
                  display: flex;
                  flex: 1;
                  .toolbox-list {
                     width: 100%;
                     height: 30px;
                     display: flex;
                     flex-wrap: nowrap;
                     align-items: center;
                     justify-content: flex-end;
                     .tool-active {
                        box-sizing: border-box;
                        position: relative;
                        img {
                           width: 24px;
                           height: 24px;
                        }
                        .tool-hover-tip {
                           width: 82px;
                           display: none;
                           height: 38px;
                           background: #fff;
                           border: 3px solid #ededef;
                           position: absolute;
                           color: #222226;
                           left: -20px;
                           bottom: 52px;
                           .text {
                              display: block;
                              position: absolute;
                              font-size: 14px;
                              text-align: center;
                              width: 100%;
                              padding: 6px 0;
                              z-index: 11;
                           }
                        }
                     }
                     .tool-item {
                        padding: 0 8px;
                        .tool-item-href {
                           display: flex;
                           flex-wrap: nowrap;
                           align-items: center;
                           .img_0 {
                              display: none;
                           }
                           .count {
                              color: #999aaa;
                              font-size: 14px;
                           }
                           &.isAgree {
                              span {
                                 color: #fc5531 !important;
                              }
                              .img_0 {
                                 display: block;
                              }
                              .img_1 {
                                 display: none !important;
                              }
                           }
                        }
                     }
                  }
                  .toolbox-right {
                     display: flex;
                     .tool-directory {
                        padding-left: 16px;
                        a {
                           display: block;
                           min-width: 74px;
                           height: 28px;
                           border-radius: 16px;
                           color: #555666;
                           font-size: 14px;
                           line-height: 28px;
                           text-align: center;
                           box-sizing: border-box;
                           border: 1px solid #ccccd8;
                        }
                     }
                  }
               }
            }
         }
         .comment-box.comment-box-new {
            background-color: #fff;
            margin-bottom: 8px;
            padding: 16px 24px 24px 24px;
            // box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.75);
            border-radius: 2px;
            .comment-title {
               font-size: 18px;
               font-weight: 600;
               color: #222226;
               line-height: 32px;
               margin-bottom: 8px;
            }
            .comment-edit-box {
               display: flex;
               justify-content: space-between;
               .user-img {
                  margin-right: 8px;
                  padding-top: 9px;
                  img {
                     display: block;
                     width: 30px;
                     height: 30px;
                     border-radius: 50%;
                     border: 1px solid #e8e8ed;
                  }
               }
               form {
                  width: 100%;
                  position: relative;
                  background: rgba(245, 246, 247, 0.8);
                  border-radius: 8px;
                  padding: 8px 0;
                  .comment-sofa-flag {
                     position: absolute;
                     height: 18px;
                     top: -14px;
                     right: 0;
                     z-index: 12;
                  }
                  .comment-content {
                     display: block;
                     width: 100%;
                     background: rgba(248, 249, 251, 0.8);
                     border: none;
                     padding: 4px 12px;
                     border-radius: 4px;
                     resize: none;
                     height: 30px;
                     font-size: 14px;
                     line-height: 22px;
                     box-sizing: border-box;
                     transition: height 0.3s ease-in-out;
                     border-top-left-radius: 8px;
                     border-top-right-radius: 8px;
                  }
                  .comment-operate-box {
                     position: absolute;
                     width: 200px;
                     top: -18px;
                     right: 0;
                     .comment-operate-l {
                        display: flex;
                        align-items: center;
                     }
                     .comment-operate-r {
                        display: flex;
                        align-items: center;
                        .comment-operate-item {
                           position: relative;
                           display: flex;
                           align-items: center;
                           margin-left: 16px;
                           .comment-operate-img {
                              display: block;
                              width: 20px;
                              height: 20px;
                           }
                           .comment-operate-tip {
                              display: none;
                              position: absolute;
                              right: -18px;
                              top: 28px;
                              width: 60px;
                              text-align: center;
                              font-size: 12px;
                              line-height: 18px;
                              background: #222226;
                              border-radius: 4px;
                              color: #fff;
                              z-index: 2001;
                           }
                           .btn-comment-input {
                              width: 72px;
                              height: 32px;
                              background: #e1e2e6;
                              color: #222226;
                              border-radius: 16px;
                              font-size: 14px;
                              text-align: center;
                              line-height: 32px;
                              border: none;
                           }
                        }
                     }
                  }
                  .comment-operate-box.active {
                     .comment-operate-l {
                        display: none;
                     }
                  }
               }
            }
         }
      }
   }
}

.justify-content-center {
   justify-content: center !important;
}

.d-flex {
   display: flex !important;
}
